<template>
  <!-- 登录弹框 -->
  <view>
    <uni-popup :maskClick="isLogin" ref="tipsPopup" type="bottom">
      <view class="casing bg-white w-full">
        <view class="title">登录享会员权益，同步全渠道订单</view>
        <view class="txt"
          >登录时将收集您的手机号用于全平台账号注册，授权头像昵
          称用于生成您的专属推广海报</view
        >
        <button class="logOnBtn" @click="switchStatus" v-if="!isAgree">
          立即登录
        </button>
        <button
          class="logOnBtn"
          v-else
          open-type="getPhoneNumber"
          @getphonenumber="getphonenumber"
        >
          立即登录
        </button>
        <button class="cancelBtn" @click="cancelEvent">其他登录</button>
        <view class="agreement">
          <view
            class="noCheckbox"
            @click="isAgree = !isAgree"
            v-if="!isAgree"
          ></view>
          <image
            @click="isAgree = !isAgree"
            v-if="isAgree"
            class="selectedIcon"
            src="https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/selectedIcon.png"
            mode="scaleToFill"
          />
          <text class="protocol_text"
            >我已阅读并同意<text @click="userAgree('1')" class="font_pro"
              >《用户协议》</text
            ><text @click="userAgree('2')" class="font_pro"
              >《隐私策略》</text
            ></text
          >
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { goToAgreement } from "@/libs/order";
import Routine from "@/libs/routine";
import { getUserPhone, getUserNewPhone } from "@/api/public";
import { silenceBindingSpread } from "@/utils";
import { mapGetters } from "vuex";
const app = getApp();
export default {
  name: "",
  props: {
    locationType: {
      type: Boolean,
      default: false,
    },
    userPhoneType: {
      type: Boolean,
      default: false,
    },
    authKey: {
      type: String,
      default: "",
    },
    icode: {
      type: String,
      default: "",
    },
    // isPhoneBox: {
    //   type: Boolean,
    //   default: false,
    // },
    specialMark: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: "申请获取用于完整服务",
    },
  },
  data() {
    return {
      isAgree: false,
      urlDomain: this.$Cache.get("imgHost"),
      isStatus: false,
    };
  },
  components: {},
  computed: mapGetters(["isLogin", "uid", "globalData"]),
  mounted() {},
  methods: {
    switchStatus() {
      // 切换状态
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
    },
    cancelEvent() {
      let url = "";
      if (this.icode) {
        url = `/pages/users/login/index?icode=${this.icode}`;
      } else {
        url = "/pages/users/login/index";
      }
      uni.navigateTo({
        url,
      });
    },
    modelCancel() {
      this.$emit("closeModel", { isStatus: this.isStatus });
    },
    modelConfirm() {
      this.$emit("confirmModel");
    },
    // #ifdef MP
    // 小程序获取手机号码
    getphonenumber(e) {
      if (!e.detail.code) {
        this.modelCancel();
      }
      uni.showLoading({ title: "加载中" });
      Routine.getCode()
        .then((code) => {
          this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
        })
        .catch((error) => {
          this.modelCancel();
          uni.hideLoading();
        });
    },
    getNewToken(encryptedData, iv) {
      Routine.getCode()
        .then((code) => {
          getUserNewPhone({
            encryptedData: encryptedData,
            iv: iv,
            code: code,
            type: "routine",
          }).then((res) => {
            this.$store.commit("SPARE_LOGIN", {
              token: res.data.token,
            });
          });
        })
        .catch((res) => {});
    },
    // 小程序获取手机号码回调
    getUserPhoneNumber(encryptedData, iv, code) {
      getUserPhone({
        encryptedData: encryptedData,
        iv: iv,
        code: code,
        key: this.authKey,
        name: "&mark", // 刚开始给默认值、防止用户重新登录获取值
        type: "routine",
      })
        .then((res) => {
          this.getNewToken(encryptedData, iv);
          this.$store.commit("LOGIN", {
            token: res.data.token,
          });
          this.$store.commit("SETUID", res.data.id);
          if (!this.specialMark) {
            this.getUserInfo();
          } else {
            this.modelCancel();
            uni.hideLoading();
          }

          if (
            res.data.isNew &&
            res.data.newPeopleCouponList &&
            res.data.newPeopleCouponList.length !== 0
          ) {
            this.$Cache.set("newGift", res.data.newPeopleCouponList);
          } else {
            this.$Cache.clear("newGift");
          }
        })
        .catch((res) => {
          uni.hideLoading();
          this.$util.Tips({
            title: res,
          });
        });
    },
    /**
     * 获取个人用户信息
     */
    getUserInfo() {
      this.$store.dispatch("GetTokenIsExist");
      // #ifdef MP
      if (!this.$Cache.get("wechatQRcode")) Routine.getQrcode();
      // #endif
      //分销绑定
      silenceBindingSpread(true, this.globalData.spread);
      this.$store
        .dispatch("USERINFO")
        .then((res) => {
          uni.hideLoading();
          this.modelCancel();
          this.isStatus = true;
        })
        .catch((err) => {
          uni.hideLoading();
          this.modelCancel();
        });
    },
    // #endif
    userAgree(num) {
      // goToAgreement("userinfo");
      if (num == "1") {
        goToAgreement("userinfo");
      } else {
        goToAgreement("userprivacyinfo");
      }
    },
    // 打开登录弹框
    open() {
      this.$refs.tipsPopup.open();
    },
    // 取消登录弹框
    cancel() {
      this.$refs.tipsPopup.close();
    },
  },
};
</script>

<style lang="scss" scoped>
.casing {
  padding: 47rpx 31rpx 0rpx 31rpx;
  height: 584rpx;
  background: linear-gradient(180deg, #e7ecf5 0%, #ffffff 100%);
  border-radius: 40rpx 40rpx 0rpx 0rpx;
  .title {
    padding: 0rpx 9rpx;
    font-family: PingFang SC, PingFang SC;
    font-size: 35rpx;
    color: #000000;
  }
  .txt {
    margin-top: 29rpx;
    padding: 0rpx 9rpx;
    font-weight: 300;
    font-size: 26rpx;
    color: #939393;
  }
  .logOnBtn,
  .cancelBtn {
    margin-top: 50rpx;
    line-height: 77rpx;
    height: 77rpx;
    text-align: center;
    background: #11cc7b;
    border-radius: 38rpx;
    font-size: 28rpx;
    color: #ffffff;
  }
  .cancelBtn {
    margin-top: 28rpx !important;
    background: #707070;
  }
}
.agreement {
  margin-top: 31rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.selectedIcon {
  width: 30rpx;
  height: 30rpx;
  border-radius: 7rpx;
}
.noCheckbox {
  width: 30rpx;
  height: 30rpx;
  border-radius: 7rpx;
  border: 2rpx solid #ccc;
}
.protocol_text {
  margin-left: 10rpx;
  font-size: 24rpx;
  color: #272727;
  .font_pro {
    color: #eb3f3a;
  }
}
</style>
